<template>
  <div class="feed-collect">
    <div
      id="scroll-wrap"
      ref="collectRef"
      style="overflow-y: auto; overflow-x: hidden"
      :style="{ height: `calc(100vh - ${collectTop}px - 82px)` }"
    >
      <div class="search-wrap">
        <SearchForm :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
      </div>
      <el-tabs
        v-model="searchParams.dealStatus"
        v-stick="{
          calcDomClass: '.el-tabs',
          stickDomClass: '.el-tabs__header',
          fixedName: 'fixedElTable',
          offset: 180
        }"
        @tab-change="tabChange"
      >
        <el-tab-pane :label="'未反馈（' + (searchParams.dealStatus == 0 ? total : listCount.uncompletedTotal) + '）'" :name="0">
        </el-tab-pane>
        <el-tab-pane :label="'已反馈（' + (searchParams.dealStatus == 1 ? total : listCount.completedTotal) + '）'" :name="1">
        </el-tab-pane>
        <el-tab-pane disabled>
          <template v-slot:label>
            <slot>
              <el-button :icon="Upload" type="primary" link @click="handleExport">导出报表</el-button>
            </slot>
          </template>
        </el-tab-pane>
      </el-tabs>
      <!-- 列表 -->
      <div class="list-wrap">
        <div class="list-item mb20" v-for="item in data" :key="item.feedbackId">
          <header>
            <div class="photo"><img :src="item.avatar" alt="" /></div>
            <div class="user-info">
              <p class="mb14">
                <span>{{ item.createBy }}</span>
                <el-button
                  :type="searchParams.dealStatus == 0 ? 'primary' : 'info'"
                  size="small"
                  style="width: 80px"
                  :disabled="searchParams.dealStatus == 1"
                  @click="feedback(item.feedbackId, searchParams.dealStatus)"
                  >{{ searchParams.dealStatus == 0 ? "反馈" : "已反馈" }}</el-button
                >
              </p>
              <el-row>
                <el-col :span="6">
                  <p>
                    账户：<span>{{ item.account }}</span>
                  </p>
                </el-col>
                <el-col :span="6">
                  <p>
                    反馈编号：<span>{{ item.orderNo }}</span>
                  </p>
                </el-col>
                <el-col :span="6">
                  <p>
                    反馈邮箱：<span>{{ item.userEmail }}</span>
                  </p>
                </el-col>
                <el-col :span="6">
                  <p>
                    反馈时间：<span>{{ item.createTime }}</span>
                  </p>
                </el-col>
              </el-row>
            </div>
          </header>
          <div class="content">
            <p>
              <span>一级模块：</span>
              <b>{{ item.clsName }}</b>
            </p>
            <p>
              <span>二级问题：</span>
              <b>{{ item.itemName }}</b>
            </p>
            <p>
              <span>问题描述备注：</span>
              <b>{{ item.question }}</b>
            </p>
            <div>
              <span>素材反馈：</span>
              <div>
                <el-image
                  v-for="image in item.imgList"
                  :key="image"
                  style="width: 100px; height: 100px"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :src="image"
                  :preview-src-list="item.imgList"
                  :initial-index="4"
                  fit="cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="changePage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import SearchForm from "@/components/SearchForm";
import { Upload } from "@element-plus/icons-vue";
import { getFeedbackList, editFeedback } from "@/api/mall/feedback";
const { proxy } = getCurrentInstance();
const props = defineProps({
  listCount: {
    type: Object,
    default: () => {
      return {
        uncompletedTotal: 0,
        completedTotal: 0
      };
    }
  }
});
const emit = defineEmits(["getCount"]);
const formList = ref([
  {
    label: "反馈编号",
    model: "orderNo",
    type: "input",
    labelWidth: "70"
  },
  {
    label: "邮箱账号",
    model: "userEmail",
    type: "input",
    placeholder: "请输入反馈者邮箱",
    labelWidth: "70"
  },
  {
    label: "会员账号",
    model: "account",
    type: "input",
    labelWidth: "70"
  },
  {
    label: "反馈时间",
    model: "time",
    type: "daterange",
    format: "YYYY-MM-DD",
    labelWidth: "70"
  },
  {
    label: "内容搜索",
    model: "searchWord",
    type: "input",
    labelWidth: "70"
  }
]);
const collectRef = ref();
const collectTop = ref();

const total = ref(0);
const data = ref([]);
const searchParams = ref({
  dealStatus: 0
});
const pagination = ref({
  current: 1,
  size: 10
});
/**
 * 初始化获取列表
 */
const init = async () => {
  const res = await getFeedbackList(pagination.value, searchParams.value);
  total.value = res.data.total;
  data.value = res.data.list;
};
/**
 * 点击搜索按钮
 */
const search = form => {
  const startTime = form.time ? form.time[0] : undefined;
  const endTime = form.time ? form.time[1] : undefined;
  searchParams.value = { ...searchParams.value, ...form, startTime, endTime };
  delete searchParams.value.time;
  init();
};
const tabChange = () => {
  total.value = searchParams.value.dealStatus == 0 ? props.listCount.uncompletedTotal : props.listCount.completedTotal;
  pagination.value = { current: 1, size: 10 };
  init();
};
/**
 * 点击重置按钮的回调
 */
const reset = () => {
  searchParams.value = { dealStatus: searchParams.value.dealStatus };
  init();
};
/**
 * 导出报表
 */
const handleExport = () => {};
const changePage = (current, size) => {
  pagination.value = { current, size };
  init();
};
/**
 * 反馈
 */
const feedback = async (id, status) => {
  if (status == 1) return;
  await editFeedback(id, 1);
  proxy.$modal.msgSuccess("操作成功");
  init();
  emit("getCount");
};
onMounted(() => {
  setTimeout(() => {
    collectTop.value = collectRef.value.getBoundingClientRect().top;
  }, 0);
  init();
});
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

:deep(.el-tabs__item.is-top) {
  &:last-of-type {
    float: right;
    margin-right: 20px;
  }
}

:deep(.el-tabs__nav) {
  width: 100%;
}

.feed-collect {
  position: relative;

  :deep(.el-tabs__header) {
    background-color: white;
  }

  .search-wrap {
    padding: 20px;
    background-color: #f6f8fa;

    :deep(.el-form-item) {
      margin-bottom: 20px;
    }
  }

  .list-wrap {
    .list-item {
      border: 1px solid #c2d4e8;

      header {
        display: flex;
        padding: 20px;
        border-bottom: 1px solid #c2d4e8;
      }

      .photo {
        margin-right: 10px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 10px;
          vertical-align: bottom;
        }
      }

      .user-info {
        flex: 1;

        & > p {
          display: flex;
          justify-content: space-between;
          color: #1a1a1a;
        }

        .el-row {
          font-size: 14px;

          .el-col {
            p {
              color: #86909c;

              span {
                color: #3d3d3d;
              }
            }
          }
        }
      }

      .content {
        padding: 20px;
        font-size: 14px;

        p,
        & > div {
          display: flex;
          margin-bottom: 16px;

          :deep(.el-image) {
            width: 64px !important;
            height: 64px !important;
            margin-right: 10px;
            vertical-align: bottom;
          }

          span {
            display: inline-block;
            width: 100px;
            text-align: right;
            color: #86909c;
            margin-right: 10px;
          }

          b {
            font-weight: normal;
            color: #3d3d3d;
          }
        }

        & > div {
          margin-bottom: 0;
        }
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: right;
  margin-top: 10px;
}
</style>
